<template>
  <div class="app-container home">
    <div class="margin">
      <el-card>
        <div class="body">
          <span class="top-tips">智能化公交站台是公共交通智能出行的基本需要和先决条件，在智慧城市智能出行中扮演着举足轻重的角色。本系统集成GPS，北斗定位技术，有线或无线通讯技术，gis地理信息系统技术，互联网技术，结合公交车辆的运行特点，对线路，车辆进行实时报站，实现公交智能信息发布，提高公交车辆的利用率，同时通过建设完善的视频监控系统实现对公交车内，站点及站场的监控管理。</span>
        </div>
      </el-card>
    </div>

    <div class="margin">
      <el-card>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="8">

            <div class="body l2-body router">
              <img
                  class="icon"
                  src="@/assets/images/line.png"
                  alt="donate"
              />
              <span class="label">路线总计</span>
              <div class="l2-value">
                 <router-link to ="/bus/line"> <span class="value">
                {{lineNum}}
               </span>
                <span class="unit">条</span> </router-link>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8">
            <div class="body l2-body site">
              <img
                  class="icon"
                  src="@/assets/images/site.png"
                  alt="donate"
              />
              <span class="label">站台总计</span>
              <div class="l2-value">
                <router-link to ="/bus/stops"> <span class="value">{{siteNum}}</span>
                <span class="unit">个</span></router-link>
              </div>
            </div>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8">
            <div class="body l2-body ads">
              <img
                  class="icon"
                  src="@/assets/images/adv.png"
              />
              <span class="label">广告位总计</span>
              <div class="l2-value">
               <router-link to ="/advertise/advertise"> <span class="value">{{advNum}}</span>
                <span class="unit">个</span></router-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="margin">
      <el-card>
        <el-row>
          <el-col :xl="4.8" :lg="4.8" :md="8" :xs="12" :sm="12" :span="25">
            <div class="l3-body">
             <span class="l3-label">客户</span>
              <div class="l3-value blue">
               <router-link to ="/advertise/customer">  <span class="value">{{customNum}}</span>
                <span class="unit">个</span></router-link>
              </div>
            </div>
          </el-col>
          <el-col :xl="4.8" :lg="4.8" :md="8" :xs="12" :sm="12" :span="25">
            <div class="l3-body">
              <span class="l3-label">订单</span>
              <div class="l3-value green">
                <span class="value" @click = "handle1">{{orderNum}}</span>
                <span class="unit">个</span>
              </div>
            </div>
          </el-col>
          <el-col :xl="4.8" :lg="4.8" :md="8" :xs="12" :sm="12" :span="25">
            <div class="l3-body">
              <span class="l3-label">未到期</span>
              <div class="l3-value green">
                <span class="value"@click = "handle2">{{unNum}}</span>
                <span class="unit">个</span>
              </div>
            </div>
          </el-col>
          <el-col :xl="4.8" :lg="4.8" :md="8" :xs="12" :sm="12" :span="25">
            <div class="l3-body">
              <span class="l3-label">已到期</span>
              <div class="l3-value black">
                <span class="value"@click = "handle3">{{edNum}}</span>
                <span class="unit">个</span>
              </div>
            </div>
          </el-col>
          <el-col :xl="4.8" :lg="4.8" :md="8" :xs="12" :sm="12" :span="25">
            <div class="l3-body">
              <span class="l3-label">将到期</span>
              <div class="l3-value red">
                <span class="value"@click = "handle4">{{willNum}}</span>
                <span class="unit">个</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="margin l4-body">
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12" :md="12" :sm="24" :xs="24">
            <a class="btn-ad-data" href="http://47.92.74.142:9091" target="_blank">广告数据</a>
          </el-col>
          <el-col :lg="12" :xl="12" :md="12" :sm="24" :xs="24" >
            <a class="btn-video-data"  href="http://47.92.74.142:9091/#/video"  target="_blank">视频监控</a>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {  getNum } from "@/api/system/user";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.6",
      // 数量
      siteNum: 123,
       lineNum: 123,
       advNum: 123,
       unNum: 123,
       willNum: 123,
       edNum: 123,
      // 数量
      orderNum: 123,
      // 数量
      customNum: 13
    };
  },
  mounted() {
    this.getNumData();
  },

  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    handle1(){
        this.$router.push({
          path: "/advertise/orderInfo",
          query: {
            date:new Date().getTime()
          }
        })
    },
    handle2(){
        this.$router.push({
          path: "/advertise/orderInfo",
          query: {
            seller: 0,
            date:new Date().getTime()
          }
        })
    },
    handle3(){
        this.$router.push({
          path: "/advertise/orderInfo",
          query: {
            seller: 1,
            date:new Date().getTime()
          }
        })
    },
    handle4(){
        this.$router.push({
          path: "/advertise/orderInfo",
          query: {
            rangeDay: 15,
            date:new Date().getTime()
          }
        })
    },
/** 查询用户列表 */
    getNumData() {
      this.loading = true;
      getNum().then(response => {
          this.siteNum = response.siteNum;
          this.lineNum = response.lineNum;
          this.advNum = response.advNum;
          this.unNum = response.unNum;
          this.willNum = response.willNum;
          this.edNum = response.edNum;
          this.orderNum = response.orderNum;
          this.customNum = response.customNum;
        }
      );
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-col-25 {
  width: 20%;
  min-width: 130px;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.margin {
  margin: 16px 0;
}

.top-tips {
  display: block;
  font-size: 14px;
  color: #333333;
  padding: 16px 0;
}

.l2-body {
  width: 95%;
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;

  &.router {
    background-color: #FFF7E8;
  }

  &.site {
    background-color: #F2FAFF;
  }

  &.ads {
    background-color: #F5FFF6;
  }


  .icon {
    width: 64px;
    height: 64px;
  }

  .label {
    margin-top: 40px;
    font-size: 16px;
    color: #1e1e1e;
  }

  .l2-value {
    .value {
      font-size: 48px;
      color: #1e1e1e;
    }

    .unit {
      font-size: 16px;
      color: #1e1e1e;
    }
  }
}


.l3-body {

  width: 95%;
  height: 145px;
  background-color: #F7F8FA;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .l3-label {
    font-size: 16px;
    color: #1e1e1e;
  }

  .l3-value {
    margin-top: 16px;

    &.blue {
      color: #409EFF;
    }

    &.green {
      color: #48CD8D;
    }

    &.black {
      color: #555555;
    }

    &.red {
      color: #D32C2C;
    }

     .value {
      font-size: 48px;

    }

     .unit {

    }
  }
}


.l4-body {
  font-size: 24px;
  color: white;
  font-weight: bolder;

  .btn-ad-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background: #409EFF;
    border-radius: 10px;
    text-decoration: none;

    &:hover{
      background-color: rgba(#409EFF,0.8);
    }
  }

  .btn-video-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background: #F0CA22;
    border-radius: 10px;
    text-decoration: none;
    &:hover{
      background-color: rgba(#F0CA22,0.8);
    }
  }
}

</style>

